<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-time</title>
	</head>
	<body>
		<div id="app" v-cloak>
			现在时间：<div v-relative-time="now"></div>
			2019/08/26 13:18:02 <div v-relative-time="1566798302"></div>
			2019/08/26 13:01:02 <div v-relative-time="1566795662"></div>
			2019/08/26 09:02:02 <div v-relative-time="before"></div>
			2019/08/25 23:02:02 <div v-relative-time="1566745322"></div>
			2019/01/06 08:02:02 <div v-relative-time="1546732922"></div>
		</div>
		<script src="js/vue2.5.js"></script>
		<script>
			var Time = {
				//获取当前Unix时间戳
                getCurrentUnix(){
                	return new Date().getTime();
                },
                //获取今日O点0时0分的Unix时间戳
                getTodayUnix(){
                	var date = new Date();
                	date.setHours(0);
                	date.setMinutes(0);o'i'
                	date.setSeconds(0);
                	date.setMilliseconds(0);
                	return date.getTime();               	
                },
                // 获取今年1月1日0时0分0秒的unix的时间戳
                getThisYearUnix(){
                	var date = new Date();
                	date.setMonth(0);
                	date.setDate(1);
                	date.setHours(0);
                	date.setMinutes(0);
                	date.setSeconds(0);
                	date.setMilliseconds(0);
                	return date.getTime();   
                },
                //格式化日期：输出格式为 xxxx-xx-xx
                format(val){
                	var dateobj = new Date(val);
                	//month代表月份的整数值从0(1月)到11(12月),所以需要转换
                	var month = this.compensateZero(dateobj.getMonth()+1);
                	var day = this.compensateZero(dateobj.getDate());
                	return dateobj.getFullYear() + '-' + month + '-' + day;
                },
                //如果小于0,在前面加个0
                compensateZero(val){
                	if(typeof val == 'number'){
                		return val<10?'0'+val:val;
                	}else{
                		return val;
                	}
                },
                //转换为相对时间
                //1分钟之前,返回'刚刚'
                //1分钟到1小时之前,返回'xx分钟前'
                //1小时到1天之前,返回'xx小时前'
                //1天到1个月(假设固定为31天)之间,返回'xx天前'
                //大于1个月，返回'xx年xx月xx日'
                transform(val){
                	//计算时间间隔，(单位:s)
                	console.log('getCurrentUnix:'+this.getCurrentUnix());
                	var interval = (this.getCurrentUnix()-val)/1000;
                	if(Math.floor(interval/60)<=0){ //1分钟之前
                		return '刚刚';
                	}else if(interval<3600){//1分钟到1小时之间
                		return Math.floor(interval/60)+' 分钟前';
                	}else if(interval>=3600&&(val-this.getTodayUnix()>=0)){//1小时到1天之间
                		return Math.floor(interval/3660)+' 小时前';
                	}else if(interval/(3600*24)<=31){//1天到一个月（假设固定为31天）之间，
                		return Math.ceil(interval/(3600*24))+' 天前';
                	}else{
                		return this.format(val);
                	}
                }
			}
			//相对时间指令
			Vue.directive('relative-time',{
				bind(el,binding){ 
					el.innerHTML = Time.transform(binding.value);
					el._relativeTime = setInterval(()=>{
						el.innerHTML = Time.transform(binding.value);
					},60000)  //每分钟，刷新一次
				},
				unbind(el){
					clearInterval(el.__relativeTime);
					delete el.__relativeTime;
				}
			})
			var vm = new Vue({
				el:'#app',
				data:{
					now : (new Date()).getTime(),
					before : 1566781322
				}
			})
		</script>
	</body>
</html>
